<template>
    <view class="login-container">
        <view class="login-header">
            <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
            <text class="title">易购商城</text>
            <text class="subtitle">欢迎回来</text>
        </view>
        
        <view class="login-form">
            <view class="form-item">
                <text class="label">手机号</text>
                <input 
                    type="text" 
                    v-model="phone" 
                    placeholder="请输入手机号" 
                    placeholder-class="placeholder"
                    maxlength="11"
                    name="phone"
                    autocomplete="tel"
                    @confirm="handleConfirm"
                />
            </view>
            <view class="form-item">
                <text class="label">密码</text>
                <input 
                    type="password" 
                    v-model="password" 
                    placeholder="请输入密码" 
                    placeholder-class="placeholder"
                    password
                    name="password"
                    autocomplete="current-password"
                    @confirm="handleConfirm"
                />
            </view>
            <view class="error-message" v-if="errorMessage">{{ errorMessage }}</view>
            <button class="login-btn" @tap="login">登 录</button>
            <view class="register-link" @tap="toRegiter">
                <text>还没有账号？</text>
                <text class="link">立即注册</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            password: '',
            errorMessage: '',
            userInfo: null
        }
    },
    methods: {
        // 处理回车确认
        handleConfirm() {
            this.login()
        },

        // 验证手机号
        validatePhone() {
            const phoneRegex = /^1[3-9]\d{9}$/
            if (!this.phone) {
                this.errorMessage = '请输入手机号'
                return false
            }
            if (!phoneRegex.test(this.phone)) {
                this.errorMessage = '请输入正确的手机号'
                return false
            }
            this.errorMessage = ''
            return true
        },

        // 登录
        async login() {
            if (!this.validatePhone()) {
                return
            }
            if (!this.password) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                })
                return
            }

            try {
                // 显示加载提示
                uni.showLoading({
                    title: '登录中...',
                    mask: true
                })

                // 从本地存储获取用户列表
                const userList = uni.getStorageSync('userList') || []
                const user = userList.find(item => item.phone === this.phone)

                // 隐藏加载提示
                uni.hideLoading()

                if (user && user.password === this.password) {
                    // 保存用户信息
                    this.userInfo = {
                        uid: user.uid,
                        phone: user.phone,
                        username: user.username,
                        balance: user.balance || 0
                    }
                    uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
                    console.log('保存的用户信息:', this.userInfo) // 调试日志

                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    })

                    // 延迟跳转，确保数据保存完成
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: '手机号或密码错误',
                        icon: 'none'
                    })
                }
            } catch (error) {
                // 隐藏加载提示
                uni.hideLoading()
                console.error('登录失败:', error)
                uni.showToast({
                    title: '登录失败，请稍后重试',
                    icon: 'none'
                })
            }
        },

        // 跳转到注册页面
        toRegiter() {
            uni.navigateTo({
                url: '/pages/register/register'
            })
        }
    }
}
</script>

<style>
.login-container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%);
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80rpx;
    margin-top: 100rpx;
}

.logo {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 40rpx;
}

.title {
    font-size: 52rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
}

.subtitle {
    font-size: 34rpx;
    color: #666;
}

.login-form {
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 60rpx 50rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    margin: 0 30rpx;
}

.form-item {
    margin-bottom: 50rpx;
    width: 100%;
}

.label {
    display: block;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
}

.form-item input {
    width: 100%;
    height: 100rpx;
    background-color: #f8f9fa;
    border-radius: 16rpx;
    padding: 0 40rpx;
    font-size: 32rpx;
    color: #333;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-item input:focus {
    border-color: #007AFF;
    background-color: #fff;
}

.placeholder {
    color: #999;
}

.error-message {
    color: #ff4d4f;
    font-size: 26rpx;
    margin: -30rpx 0 30rpx;
    padding-left: 16rpx;
}

.login-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
    color: #fff;
    border-radius: 16rpx;
    font-size: 34rpx;
    font-weight: 500;
    margin: 60rpx 0;
    border: none;
    box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.2);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.login-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
}

.register-link {
    text-align: center;
    font-size: 30rpx;
    color: #666;
    margin-top: 20rpx;
}

.register-link .link {
    color: #007AFF;
    margin-left: 12rpx;
    font-weight: 500;
}

/* 添加输入框动画效果 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5rpx); }
    75% { transform: translateX(5rpx); }
}

.form-item input.error {
    animation: shake 0.3s ease-in-out;
    border-color: #ff4d4f;
}
</style>
